<template>
  <div>
    <el-input v-model="a" v-keyboard></el-input>
    <el-input v-model="b" v-keyboard></el-input>
    <el-input v-model="c" v-keyboard></el-input>
    <el-input v-model="d" v-keyboard></el-input>
    <keyboard></keyboard>
    <button @click="btnFn" style="background-color: aliceblue;">aaaa</button>

    <!-- 从各自的子组件来渲染主组件 -->
    <!-- <Keyboard></Keyboard>
    <DialogModal></DialogModal> -->
    
    <!-- 在组件模板中 -->
    <!-- <router-link to="/Keyboard">键盘</router-link> -->
  </div>
</template>

<script setup>
import { ref } from "vue";

let a = ref(1);
let b = ref(2);
let c = ref(3);
let d = ref(4);

const btnFn = () => {
  console.log(a.value);
  console.log(b.value);
  console.log(c.value);
  console.log(d.value);
};
</script>

<style lang="scss" scoped></style>